<template>
  <div class="active-data">
    <div style="margin-bottom: 10px">
      <a-button type="primary" @click="goback"> 返回抽奖管理 </a-button>
    </div>
    <search-table
      :url="listUrl"
      ref="searchTable"
      :columns="columns"
      :defaultParams="defaultParams"
      :form="form"
      :hideSelect="true"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="中奖状态">
            <a-select
              showSearch
              allowClear
              style="width: 195px"
              :options="goodsList"
              v-decorator="['status', { initialValue: '' }]"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="奖品类型">
            <a-select
              showSearch
              allowClear
              style="width: 195px"
              :options="prizesList"
              v-decorator="['prizeType', { initialValue: 0 }]"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select
              showSearch
              allowClear
              style="width: 195px"
              :options="auditStatus"
              v-decorator="['auditStatus', { initialValue: '' }]"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="用户昵称/手机号">
            <a-input
              allowClear
              v-decorator="['keyWord']"
              placeholder="请输入用户昵称/手机号"
            ></a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="lottery:record:export">
          <a-button type="primary" @click="exportExcel">导出</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <span
            @click="
              '待审核'.includes(mapBtnName(record)) ||
              '待兑换'.includes(mapBtnName(record)) ||
              '审核通过'.includes(mapBtnName(record)) ||
              '审核拒绝'.includes(mapBtnName(record)) ||
              '审核驳回'.includes(mapBtnName(record)) ||
              '已兑换'.includes(mapBtnName(record))
                ? goAudit(record)
                : ''
            "
            :class="[
              { 'text-primary': '待审核'.includes(mapBtnName(record)) },
              {
                'text-success':
                  '待兑换'.includes(mapBtnName(record)) ||
                  '审核通过'.includes(mapBtnName(record)) ||
                  '已兑换'.includes(mapBtnName(record)),
              },
              {
                'text-danger':
                  '审核拒绝'.includes(mapBtnName(record)) ||
                  '审核驳回'.includes(mapBtnName(record)),
              },
              '待审核'.includes(mapBtnName(record)) ||
              '待兑换'.includes(mapBtnName(record)) ||
              '审核通过'.includes(mapBtnName(record)) ||
              '审核拒绝'.includes(mapBtnName(record)) ||
              '审核驳回'.includes(mapBtnName(record)) ||
              '已兑换'.includes(mapBtnName(record))
                ? 'pointer'
                : '',
            ]"
            >{{ mapBtnName(record) }}</span
          >
        </a-space>
      </template>
    </search-table>
    <auditModal
      ref="auditModal"
      :auditInfo="auditModalInfo"
      @initTable="initTable"
    ></auditModal>
  </div>
</template>

<script>
import auditModal from "@/views/menuPage/marketing/lottery/page/component/auditModal";
export default {
  components: { auditModal },
  data() {
    return {
      auditModalInfo: {},
      listUrl: "goldenhome/gh/lottery/admin_/lottery/record/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      // headParams: { baseURL: "/liveRoom" },
      defaultParams: {
        activityId: this.$route.query.id,
        // status: 0,
      },
      // 活动状态
      goodsList: [
        { value: "", label: "全部状态" },
        { value: 1, label: "已中奖" },
        { value: 2, label: "未中奖" },
      ],
      // 奖品类型
      prizesList: [
        { value: 0, label: "全部类型" },
        { value: 1, label: "优惠券" },
        { value: 2, label: "积分" },
        { value: 3, label: "赠品" },
      ],
      // 奖品类型
      auditStatus: [
        { value: "", label: "全部状态" },
        { value: -1, label: "已过期" },
        { value: "0", label: "未上传（待核销）" },
        { value: 1, label: "已兑换（已核销）" },
        { value: 2, label: "待审核" },
        { value: 3, label: "审核通过" },
        { value: 4, label: "审核拒绝" },
        { value: 5, label: "直接领取" },
        { value: 6, label: "审核驳回" },
      ],
      columns: [
        {
          title: "用户昵称",
          dataIndex: "nickName",
          key: "nickName",
        },
        {
          title: "手机号",
          dataIndex: "phoneNumber",
          key: "phoneNumber",
        },
        {
          title: "抽奖时间",
          dataIndex: "createDate",
          align: "center",
          key: "createDate",
        },
        {
          title: "中奖状态",
          dataIndex: "status",
          align: "center",
          key: "status",
          customRender: (text, record) => {
            if (record?.status == "1") {
              return "中奖";
            }
            if (record?.status == "2") {
              return "未中奖";
            }
            return "--";
          },
        },
        {
          title: "类型",
          dataIndex: "prizeType",
          align: "center",
          key: "prizeType",
          customRender: (text, record) => {
            if (text == 1) {
              text = "优惠券";
            } else if (text == 2) {
              text = "积分";
            } else if (text == 3) {
              text = "赠品";
            }
            return text;
          },
        },
        {
          title: "详细",
          dataIndex: "prizeName",
          key: "prizeName",
          customRender: (text, record) => {
            return (
              <div class="product_td">
                <table-img src={record.goodsPicture} />
                <div class="product_name">{text}</div>
              </div>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          width: 200,
          scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },
  computed: {
    mapBtnName() {
      return (record) => {
        const auditStatus = record?.auditStatus || "";
        const goodsType = record?.goodsType || "";
        if (goodsType == 3) {
          if (auditStatus == 0) {
            return "待核销";
          }
          if (auditStatus == 1) {
            return "已核销";
          }
        }
        if (goodsType == 1) {
          if (auditStatus == -1) {
            return "已过期";
          }
          if (auditStatus == 0) {
            return "未上传";
          }
          if (auditStatus == 1) {
            return "已兑换";
          }
          if (auditStatus == 2) {
            return "待审核";
          }
          if ([3, 5].includes(auditStatus)) {
            return "待兑换";
          }
          if (auditStatus == 4) {
            return "审核拒绝";
          }
          if (auditStatus == 6) {
            return "审核驳回";
          }
        }
        return "———";
      };
    },
  },
  methods: {
    // 去审核
    goAudit(item) {
      this.auditModalInfo = item;
      this.auditModalInfo.statusName = this.mapBtnName(item);
      this.$refs.auditModal.visible = true;
    },
    goback() {
      this.$router.push({
        name: "MarketingLottery",
      });
    },
    initTable() {
      this.$refs.searchTable.refreshTable();
    },
    //导出数据
    exportExcel() {
      const obj = this.$refs.searchTable;
      console.log(obj.searchParams);
      if (obj.dataSource.length == 0) {
        this.$message.warning("页面数据为空无法导出！！");
        return false;
      }
      this.$export(
        "goldenhome/gh/lottery/admin_/lottery/record/export",
        obj.searchParams || {}
      );
    },
  },
};
</script>

<style lang='less' scoped>
.product_td {
  display: flex;
  align-items: center;
  .product_name {
    margin-left: 6px;
  }
}
</style>
